<template>
	<scroll-view scroll-y="true" lower-threshold="200" style="height:100vh" @scrolltolower="_lower" enable-back-to-top='true'>
		<view class="weui-grids menu-grid">
			<block v-for="(item,index) in bqbList" :key="index">
				<view @click="onMenuClick(item)">
					<view class="weui-grid menu-item">
						<image class="menu-image" lazy-load="true" :src="item"></image>
					</view>
				</view>
			</block>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				bqbData: {},
				pageNum: 1,
				bqbList: []
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.bqbData != null) {
				let bqbData = JSON.parse(decodeURI(options.bqbData))
				this.bqbData = bqbData
				this._lower()
				uni.setNavigationBarTitle({
					title: bqbData.bqb_name,
				})
			}
		},
		methods: {
			_lower() {
				let bqbAllList = this.bqbData.images
				this.bqbList = bqbAllList.slice(0, this.pageNum * 20)
				this.pageNum = this.pageNum + 1
			},
			onMenuClick(bqbUrl) {
				console.log(bqbUrl)
				let bqbUrls = this.bqbData.images
				uni.previewImage({
					current: bqbUrl, // 当前显示图片的http链接
					urls: bqbUrls // 需要预览的图片http链接列表
				})
			}
		}
	}
</script>

<style>
	.menu-grid {
		margin: 10px 15px;
		border: 1px solid white;
	}

	.menu-item {
		width: 33.3%;
		padding: 5px 5px;
		text-align: center;
	}

	.menu-image {
		width: 80px;
		height: 80px;
		border-radius: 6px;
		box-shadow: 0 0 5px #555;
	}

	.menu-item_label {
		margin-top: 0px;
		font-size: 13px;
	}
</style>
